<template>
  <section
    @click="clickCurrent('current')"
    @mousedown="clickCurrent('dragging')"
  >
    <div :class="['custorm--modelbox', 'graphictitle-show', (custormCurrent == custormIndex)?'drag active':'drag']">
      <div class="noshow"></div>
      <div style="overflow: hidden;">
        <div class="es-title title1">
          <div class="title-content">
            <!-- <div
              class="main-title line-hide"
              style="width:260px;"
            >{{custormItemData.name}}</div> -->
            <div style="display:flex;justify-content:space-between;border-bottom: 1px #ccc solid; margin-top:10px;">
               <!-- <span v-show="custormItemData.startdatatext=='1' && custormItemData.startdefault=='1'">2020-08-11</span>
               <span v-show="custormItemData.startdatatext=='2' && custormItemData.startdefault=='1'">{{custormItemData.default.startappointdata}}</span>
               <span v-show="custormItemData.startdefault=='2'">{{custormItemData.starttips}}</span> -->
                <span><span style="color:red;margin-right:5px;" v-if="custormItemData.required==1">*</span>{{custormItemData.name.startname}}</span>
              <span>
                <span v-if="custormItemData.startdatatext=='2' && custormItemData.startdefault=='1' && custormItemData.enddatatext=='2' && custormItemData.enddefault=='1'">{{custormItemData.default.startappointdata}}</span>
                <span v-else style="color:#b0b3bf;font-size:13px;">请选择</span>
                <i class="el-icon-arrow-right"></i>
              </span>
            </div>

                <div style="display:flex;justify-content:space-between; margin-top:10px;">
                    <!-- <span v-show="custormItemData.enddatatext=='1' && custormItemData.enddefault=='1'">2020-08-11</span>
                    <span v-show="custormItemData.enddatatext=='2' && custormItemData.enddefault=='1'">{{custormItemData.default.endappointdata}}</span>
                    <span v-show="custormItemData.enddefault=='2'">{{custormItemData.endtips}}</span> -->
                    <span>{{custormItemData.name.endname}}</span>
                    <span>
                       <span v-if="custormItemData.startdatatext=='2' && custormItemData.startdefault=='1' && custormItemData.enddatatext=='2' && custormItemData.enddefault=='1'">{{custormItemData.default.endappointdata}}</span>
                      <span v-else style="color:#b0b3bf;font-size:13px;">请选择</span>
                        <i class="el-icon-arrow-right"></i>
                    </span>
                </div>
          </div>
        </div>
      </div>
      <div
        class="btn-edit-del"
        @click="delCurrent"
      ><span class="btn-del iconfont icon icon-close"></span></div>
    </div>
  </section>
</template>

<script>
import defaultConfig from './utils/showConfig'
export default {
  mixins: [defaultConfig.mixins],
  props: {
    defaultConfig: {
      type: Object,
      default: function() {
        return defaultConfig
      }
    }
  },
  methods: {

  }
}
</script>

<style lang="scss" scoped>
.es-title {
  position: relative;
}

.es-title {
  margin: 12px;
  font-size: 16px;
  font-weight: 700;
}

.es-title.title1 .title {
  padding: 0 10px;
  position: relative;
  background: #fff;
  z-index: 2;
}

.es-title .title-more {
  font-size: 13px;
  color: #999999;
  font-weight: normal;
}
.two-line-hide {
  overflow: hidden;
  text-overflow: ellipsis;
}
.line-hide {
  white-space: nowrap;
}
</style>
